<template>
  <el-dialog
    title="调期"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="700px"
  >
    <el-form
      :model="adjustForm"
      :rules="adjustFormRules"
      ref="adjustForm"
      label-width="65px"
      label-position="left"
    >
      <h3>课程：{{ adjustForm.name }}</h3>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="期次：" prop="period">
            <nice-select
              v-model="adjustForm.period"
              placeholder="请选择期次"
              clearable
              :options="periodList"
              @change="handleChange"
            ></nice-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级：" prop="class_id">
            <nice-select
              v-model="adjustForm.class_id"
              placeholder="请选择班级"
              clearable
              :options="classList"
            ></nice-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="small">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit"
        size="small"
        v-preventReClick
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  getCoursePeriodList,
  getAllClassByPeriodId,
  adjustPeriod
} from "@/api/user";
export default {
  data() {
    return {
      visible: false,
      adjustForm: {
        period: "",
        class_id: "",
        name: ""
      },
      userId: "",
      adjustFormRules: {
        period: [{ required: true, message: "请选择期次", trigger: "change" }]
      },
      periodList: [],
      classList: [],
      oldPeriodId: "",
      oldClassId: ""
    };
  },
  methods: {
    init(row, id) {
      this.visible = true;
      console.log(222, row);
      this.$nextTick(() => {
        this.$refs["adjustForm"].resetFields();
        this.userId = id;
        this.oldPeriodId = row.period;
        this.oldClassId = row.class_id;
        this.adjustForm = {
          period: row.period,
          class_id: row.class_id,
          name: row.name
        };
        this.getCoursePeriodList(row);
      });
    },
    async getCoursePeriodList(row) {
      let res = await getCoursePeriodList({
        "nice_course_period.course_id": row.course_id
      });
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        if (data.data.list && data.data.list.length) {
          this.periodList = data.data.list.map(ele => {
            let frequency = JSON.parse(ele.frequency);
            let week = "周" + this.$filterFrequency(frequency);
            let label = "第" + this.$convertNum(ele.sort) + "期" + " " + week;
            return { label: label, value: ele.id };
          });
          this.getAllClassByPeriodId(this.oldPeriodId);
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    handleChange(val) {
      this.adjustForm.class_id = "";
      this.getAllClassByPeriodId(val);
    },
    async getAllClassByPeriodId(id) {
      let res = await getAllClassByPeriodId({
        "nice_classes.period": id
      });
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.classList = data.data.list.map(ele => {
          return {
            label:
              ele.classes_name +
              " " +
              "辅导老师：" +
              ele.tutor_name +
              " " +
              ele.num +
              "学生",
            value: ele.id
          };
        });
      } else {
        this.$message.error(data.msg);
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["adjustForm"].validate(valid => {
        if (valid) {
          this.submit();
        }
      });
    },
    async submit() {
      let res = await adjustPeriod([
        {
          oldPeriodId: this.oldPeriodId,
          newPeriodId: this.adjustForm.period,
          classId: this.adjustForm.class_id,
          studentId: this.userId
        }
      ]);
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.$message({
          message: "调期成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.visible = false;
            this.$emit("refreshDataList");
          }
        });
      } else {
        this.$message(data.msg);
      }
    }
  }
};
</script>
